import React from 'react';
import { CSSTransition } from "react-transition-group";
import { Mask } from '@/design';
import { LineShareButton, TwitterShareButton, FacebookShareButton, TelegramShareButton, WhatsappShareButton } from 'react-share';
import { LineIcon, TwitterIcon, FacebookIcon, TelegramIcon, WhatsappIcon } from 'react-share';
import { useSelector } from 'umi';
import styles from './Share.less';

export default function (props: any) {

  const { codeDetail: { codeId } } = useSelector((state: any) => state.store);
  const { currentstore: { braId, braName, umeStoreUrl } } = useSelector((state: any) => state.currentstore);
  let shareUrl = `${document.location.origin}/home?codeId=${codeId}&braId=${braId}`;
  const buttonParams = {
    className: styles.share_item,
    url: shareUrl,
    title: braName,
    description: '分享描述測試',
    imageurl: umeStoreUrl,
    // image: Ume_Logo
  }

  return <>
    {props.visible && <Mask onClick={props.onClose} />}
    <CSSTransition
      in={props.visible}
      timeout={500}
      classNames="spec_foot_modal"
      unmountOnExit
    >
      <div className={styles.share_wrap}>
        <h3 className={styles.share_title}>分享{props.title && `「${props.title}」`}到</h3>
        <div className={styles.share_list}>
          <LineShareButton {...buttonParams} >
            <LineIcon className={styles.icon} borderRadius={10} />
            <span className={styles.name}>Line</span>
          </LineShareButton>
          <TwitterShareButton {...buttonParams} >
            <TwitterIcon className={styles.icon} borderRadius={10} />
            <span className={styles.name}>Twitter</span>
          </TwitterShareButton>
          <FacebookShareButton {...buttonParams} >
            <FacebookIcon className={styles.icon} borderRadius={10} />
            <span className={styles.name}>Facebook</span>
          </FacebookShareButton>
          <TelegramShareButton {...buttonParams} >
            <TelegramIcon className={styles.icon} borderRadius={10} />
            <span className={styles.name}>Telegram</span>
          </TelegramShareButton>
          <WhatsappShareButton {...buttonParams} >
            <WhatsappIcon className={styles.icon} borderRadius={10} />
            <span className={styles.name}>Whatsapp</span>
          </WhatsappShareButton>
        </div>
      </div>
    </CSSTransition>
  </>
}

